<template>
 <div :class="$style.container">
   <div :class="$style.search">
    <div :class="$style.select">
      <label>产线</label>
      <el-select :class="$style.select_item" v-model="searchTaskParams.customerId" filterable size="small" placeholder="请选择" clearable @change="getSelectedDomainById">
        <el-option v-for="item in productionLines" :key="item.id" :value="item.id" :label="item.label"></el-option>
      </el-select>
    </div>
    <div :class="$style.select">
      <label>设备信息</label>
      <el-select :class="$style.select_item" v-model="searchTaskParams.nodeIds" filterable size="small" placeholder="请选择" clearable>
        <el-option v-for="item in devices" :key="item.id" :value="item.id" :label="item.label"></el-option>
      </el-select>
    </div>
    <div :class="$style.select">
      <label>报警来源</label>
      <el-select :class="$style.select_item" v-model="searchTaskParams.appName" filterable size="small" placeholder="请选择" clearable>
        <el-option v-for="item in alarmSource" :key="item.id" :value="item.valueCode" :label="item.label"></el-option>
      </el-select>
    </div>
    <div :class="$style.select">
      <label>报警级别</label>
      <el-select :class="$style.select_item" v-model="searchTaskParams.severities" multiple collapse-tags filterable size="small" placeholder="请选择" clearable>
        <el-option v-for="item in baowuAlertSeverity" :key="item.id" :value="item.valueCode" :label="item.label"></el-option>
      </el-select>
    </div>
    <div :class="$style.input_message">
      <label>报警消息</label>
      <el-input v-model="searchTaskParams.messageFilter" type="text" placeholder="请输入内容"></el-input>
    </div>
    <div :class="$style.select_date_time">
      <label>报警时间</label>
      <el-date-picker type="daterange" value-format="yyyy-MM-dd" v-model="searchTaskParams.time" range-separator="至" value start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
    </div>
    <div :class="$style.btn_group">
      <el-button type="primary" @click="searchAlarmList">查询</el-button>
      <el-button type="primary" @click="cleanSearchTaskParams">清空</el-button>
    </div>
  </div>

  <div :class="$style.alert_table">
    <div :class="$style.header">
      <label>报警工作台</label>
      <el-button type="primary" size="mini">批量忽略</el-button>
    </div>
    <el-table ref="multipeTable" style="width:100%" border resizable :data="alarmWorkbenchTableData">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="customerName" label="产线"></el-table-column>
      <el-table-column prop="deviceName" label="设备信息"></el-table-column>
      <el-table-column prop="alarmSource" label="报警来源"></el-table-column>
      <el-table-column prop="alarmMessage" show-overflow-tooltip label="报警消息"></el-table-column>
      <el-table-column prop="alarmLevel" label="报警级别"></el-table-column>
      <el-table-column prop="firstAlarmTime" label="首次报警时间"></el-table-column>
      <el-table-column prop="alarmNumber" label="报警次数"></el-table-column>
      <el-table-column prop="recentAlarmTime" label="最近报警时间"></el-table-column>
      <el-table-column prop="alarmStatus" label="报警状态"></el-table-column>
      <el-table-column label="操作" fixed="right" min-width='136' header-align="center">
        <template>
          <el-button type="primary" size="mini">分析</el-button>
          <el-button type="primary" size="mini">确认</el-button>
          <el-button type="danger" size="mini">忽略</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <div :class="$style.pagination">
    <el-pagination
      background
      @size-change="handlePageSizeChange"
      @current-change="handleCurrentPageChange"
      :current-page.sync="pages.currentPage"
      :page-sizes="[10, 25, 50, 100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pages.total">
    </el-pagination>
  </div>
 </div>
</template>

<script>
import api from '../../../common/js/api';
import moment from 'moment';
import { mapGetters } from 'vuex';
import { formatDate } from '../../../common/js/utils';

/**
 * 获取报警工作台数据列表和数量
 * @param {array} params
 */
const getAlertByPage = params => {
  return api.post('alertQueryFlexService.getAlertByPage', params).then(ret => {
    return ret;
  });
};
export default {
  name: 'AlarmWorkbench',
  data () {
    return {
      searchTaskParams: {
        customerId: '',
        domain: '',
        nodeIds: '',
        appName: '',
        messageFilter: '',
        severities: [],
        time: '',
        firstTimeFrom: '',
        firstTimeTo: ''
      },
      pagination: {
        start: 0,
        length: 10,
        statCount: true
      },
      pages: {
        total: 0,
        currentPage: 1
      },
      devices: [],
      alarmWorkbenchTableData: []
    };
  },
  computed: {
    ...mapGetters('role', ['currentRole']),
    ...mapGetters('resource', ['productionLines', 'allDevices']),
    ...mapGetters('dictionary', ['baowuAlertSeverity', 'alarmSource'])

  },
  watch: {
    currentRole (newValue) {
      if (newValue && newValue.roleID) {
        this.searchAlarmList();
      }
    }
  },

  mounted () {
    if (this.currentRole && this.currentRole.roleID) {
      this.searchAlarmList();
    }
  },

  methods: {
    searchAlarmList () {
      let param = Object.assign({}, this.searchTaskParams);
      param.severities = param.severities.length > 0 ? param.severities.join(',') : '';
      delete (param.time);
      // 此处最好使用时间戳
      param.firstTimeFrom = this.searchTaskParams.time && this.searchTaskParams.time.length > 0 ? moment.utc(this.searchTaskParams.time[0]).format() : '';
      param.firstTimeTo = this.searchTaskParams.time && this.searchTaskParams.time.length > 0 ? moment.utc(this.searchTaskParams.time[1]).format() : '';
      param.roleId = this.currentRole.roleID;
      param.states = '-100, 0';
      const params = [];
      params.push(param);
      params.push(this.pagination);
      getAlertByPage(params).then(ret => {
        let alarmList = (ret.data && ret.data.data) || [];
        let total = (ret.data && ret.data.total) || 0;
        this.pages.total = total;
        let result = [];
        debugger;
        if (ret.code === '0' && alarmList.length > 0) {
          alarmList.forEach((item) => {
            let customerName = item.customerName;
            let deviceName = item.devName;
            let alarmSource = this.findAlarmSource(item.appName);
            let alarmMessage = item.message;
            let alarmLevel = this.findAlarmLevelLabel(item.severity);
            let firstAlarmTime = formatDate(item.firstArisingTime);
            let alarmNumber = item.count;
            let recentAlarmTime = formatDate(item.arisingTime);
            let alarmStatus = item.state;
            let row = {
              customerName,
              deviceName,
              alarmSource,
              alarmMessage,
              alarmLevel,
              firstAlarmTime,
              alarmNumber,
              recentAlarmTime,
              alarmStatus
            };

            result.push(row);
          });
        }
        this.alarmWorkbenchTableData = result;
      });
    },

    findAlarmLevelLabel (val) {
      let findValue = this.baowuAlertSeverity.find(item => item.valueCode == val);
      return (findValue && findValue.label) || '';
    },

    findAlarmSource (val) {
      let findValue = this.alarmSource.find(item => item.valueCode == val);
      return (findValue && findValue.label) || '';
    },

    // formatDateTime (val) {
    //   return moment(val).format('YYYY-MM-DD HH:mm:ss');
    // },

    getSelectedDomainById (id) {
      let selectedDomain = this.productionLines.find((item) => {
        return item.id === id;
      });
      this.searchTaskParams.domain = selectedDomain && selectedDomain.domainPath ? selectedDomain.domainPath : '';
      this.searchTaskParams.customerId = selectedDomain && selectedDomain.id ? selectedDomain.id : '';
      // 获取产线对应的设备列表
      this.searchTaskParams.nodeIds = '';
      this.devices = this.allDevices.filter((item) => {
        return item.customerId === id;
      });
    },

    cleanSearchTaskParams () {
      this.searchTaskParams = {
        customerId: '',
        domain: '',
        nodeIds: '',
        appName: '',
        messageFilter: '',
        severities: [],
        time: '',
        firstTimeFrom: '',
        firstTimeTo: ''
      };
    },

    handlePageSizeChange (val) {
      this.pagination.length = val;
      this.pagination.start = 0;
      this.pages.currentPage = 1;
      this.searchAlarmList();
    },

    handleCurrentPageChange (val) {
      this.pages.currentPage = val;
      this.pagination.start = this.pagination.length * (val - 1);
      this.searchAlarmList();
    }
  }
};
</script>

<style lang="scss" module>
  @import '../../../style/default/alarm-workbench.scss';
</style>
